<template>
  <div class="body">
    <el-card>
      <div class="title">企业管理</div>
      <el-form :inline="true" :model="formData">
        <el-form-item label="用户名称:">
          <el-input
            size="mini"
            v-model="formData.username"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司名称:">
          <el-input
            size="mini"
            v-model="formData.name"
            placeholder="请输入公司名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司地址:">
          <el-input
            size="mini"
            v-model="formData.address"
            placeholder="请输入公司地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司类型:">
          <el-select
            size="mini"
            v-model="formData.companyType"
            placeholder="请选择公司类型"
            clearable
          >
            <el-option
              v-for="(item, index) in options1"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批状态:">
          <el-select
            size="mini"
            v-model="formData.status"
            placeholder="请选择审批状态"
            clearable
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button size="mini" type="primary" @click="getCompanyTechnology"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" align="center" label="序号" width="100">
        </el-table-column>
        <el-table-column
          prop="companyUrl"
          align="center"
          label="公司头像"
          width="150"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px; border-radius: 50%"
              :src="scope.row.companyUrl"
              :preview-src-list="[`${scope.row.companyUrl}`]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="license"
          align="center"
          label="营业执照"
          width="150"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px; border-radius: 5px"
              :src="scope.row.license"
              :preview-src-list="[`${scope.row.license}`]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          show-overflow-tooltip
          align="center"
          label="公司名称"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          show-overflow-tooltip
          align="center"
          label="用户名称"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          show-overflow-tooltip
          align="center"
          label="公司地址"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="briefInt"
          show-overflow-tooltip
          align="center"
          label="公司简介"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="introduce"
          show-overflow-tooltip
          align="center"
          label="公司详情"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="companyTypeStr"
          show-overflow-tooltip
          align="center"
          label="公司类型"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          show-overflow-tooltip
          align="center"
          label="创建时间"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="userNum"
          show-overflow-tooltip
          align="center"
          label="公司人数"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="honor"
          show-overflow-tooltip
          align="center"
          label="公司荣誉"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          show-overflow-tooltip
          align="center"
          label="联系方式"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="审批状态"
          width="150"
        >
          <template slot-scope="scope">
            <span
              :style="{
                color:
                  scope.row.status == 2
                    ? '#26db6f'
                    : scope.row.status == 3
                    ? '#ff0000'
                    : '#333',
              }"
              >{{
                scope.row.status == 1
                  ? "待审批"
                  : scope.row.status == 2
                  ? "审批通过"
                  : "审批未通过"
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button
              :disabled="scope.row.status != 1"
              @click="approve(scope.row)"
              type="text"
              size="small"
              >审批通过</el-button
            >
            <el-button
              :disabled="scope.row.status != 1"
              @click="reApprove(scope.row)"
              type="text"
              size="small"
              >审批拒绝</el-button
            >
            <el-button @click="deleteApp(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="currentPage.pageSize"
        layout="total,->, sizes, prev, pager, next, jumper"
        :total="currentPage.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getCompanyList, approveCompanyConfirm } from "@/api/company";
import {
  approveCompanyTechnology,
  delCompanyTechnology,
} from "../../api/table";

export default {
  data() {
    return {
      formData: {
        username: "",
        name: "",
        address: "",
        companyType: "",
        status: "",
      },
      options: [
        {
          label: "待审批",
          value: 1,
        },
        {
          label: "审批通过",
          value: 2,
        },
        {
          label: "审批不通过",
          value: 3,
        },
      ],
      options1: [
        {
          label: "茶业",
          value: 1,
        },
        {
          label: "工业",
          value: 2,
        },
        {
          label: "农业",
          value: 3,
        },
        {
          label: "服务业",
          value: 4,
        },
      ],
      currentPage: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
    };
  },
  mounted() {
    this.getCompanyTechnology();
  },
  methods: {
    async getCompanyTechnology() {
      const data = {
        username: this.formData.username,
        name: this.formData.name,
        address: this.formData.address,
        companyType: this.formData.companyType,
        status: this.formData.status,
        page: this.currentPage.page,
        pageSize: this.currentPage.pageSize,
      };
      const res = await getCompanyList(data);
      if (res.status != 0) {
        this.$message.error(res.message);
        return;
      }
      this.tableData = res.data.data;
      this.currentPage.total = res.data.total;
    },
    approve(row) {
      console.log(row);
      this.$confirm("确定审批通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = {
            id: row.id,
            status: 2,
          };
          const res = await approveCompanyConfirm(data);
          if (res.status != 0) {
            this.$message.error(res.message);
            return;
          }
          this.getCompanyTechnology();
          this.$message({
            type: "success",
            message: "已审批!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审批",
          });
        });
    },
    reApprove(row) {
      this.$confirm("确定审批未通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = {
            id: row.id,
            status: 3,
          };
          const res = await approveCompanyConfirm(data);
          if (res.status != 0) {
            this.$message.error(res.message);
            return;
          }
          console.log(this.tableData);

          if (this.tableData.length == 1) {
            console.log(this.currentPage.page);

            this.currentPage.page = this.currentPage.page - 1;
          }
          this.getCompanyTechnology();
          this.$message({
            type: "success",
            message: "已审批!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审批",
          });
        });
    },
    edit(row) {
      console.log(row);
      let rowData = JSON.parse(JSON.stringify(row));

      this.$refs.editDialog.open(rowData);
    },
    deleteApp(row) {
      console.log(row);

      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = {
            id: row.id,
          };
          const res = await delCompanyTechnology(data);
          if (res.status != 0) {
            this.$message.error(res.message);
            return;
          }
          console.log(this.tableData);

          if (this.tableData.length == 1) {
            console.log(this.currentPage.page);

            this.currentPage.page = this.currentPage.page - 1;
          }
          setTimeout(() => {
            this.getCompanyTechnology();
          }, 500);
          // this.getCompanyTechnology()
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage.pageSize = val;
      this.getCompanyTechnology();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage.page = val;
      this.getCompanyTechnology();
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  padding: 20px;
  // height: 100vh;
  background: #f5f7fa;

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 20px;
  }
}
</style>
